<template>
	<view>
		<view class="box">
			<view style="padding: 10px 0px 10px 10px">
				<view style="display: flex;">
					<view style="font-size: 18px;font-weight: bold;">预约挂号</view>
					<view style="margin-left: 15px;color: gray;margin-top: 4px;">专业咨询</view>
					<view style="margin-left: 10px;color: gray;margin-top: 4px;">精准治疗</view>
					<button type="primary" size="mini"
						style="background-color: green;margin-left:70px;width: 80px;padding: 2px;"
						@click="loadDoctor">立即搜索</button>
				</view>
			</view>
			<view style="display: flex; gap: 10px;">
				<uni-data-select v-model="city" :localdata="CityList"></uni-data-select>
				<uni-data-select v-model="departmentId" :localdata="DepartmentData"></uni-data-select>
				<uni-data-select v-model="week" :localdata="formatDates"></uni-data-select>
				<uni-data-select v-model="time" :localdata="TimeRanges"></uni-data-select>
			</view>
			<view style="margin-top: 20px;padding: 5px;padding-left: 20px;" class="box" v-for="doctor in DoctorData">
				<view style="display: flex;">
					<view style="width: 70px;">
						<image :src="doctor.avatar"
							style="width: 70px;height: 70px; margin-left: 2px;border-radius: 50%;">
					</view>
					<view style="flex: 4;">
						<view style="display: flex;gap: 5px;margin-left: 8px;font-size: 16px;">
							<view style="font-size: 18px;font-weight: bold;">{{doctor.name}}</view>
							<view>{{doctor.staff}}</view>
							<view>{{doctor.officeName}}</view>
						</view>
						<view
							style="display: flex;gap: 10px;margin-left: 10px;font-size: 16px;color: gray;margin-top: 4px;">
							<view>{{doctor.hospitalName}}</view>
							<view class="square-box">{{doctor.level}}</view>
						</view>
						<view
							style="display: flex;gap: 10px;margin-left: 10px;font-size: 15px;color: gray;margin-top: 2px;">
							<view>接诊率 <strong style="color: orange;margin-left: 10px;">99%</strong></view>
							<view>问诊量 <strong style="color: orange;margin-left: 10px;">{{doctor.count}}</strong></view>
						</view>
					</view>
					<view style="flex: 1;">
						<button size="mini" type="primary" @click="goDoctoerDetail(doctor.id)"
							style="font-size: 14px;line-height: 20px;width: 58px;padding: 10px;margin-left: 10px;">查看详情</button>
					</view>
				</view>
				<view style="display: flex;">
					<text v-for="(label, index) in doctor.tag" :key="index" class="oval-box"
						style="margin-top: 10rpx; margin-left: 10rpx;border: 1px solid orange;color: orange;">
						{{ label }}
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				DoctorData: {},
				DatesAndWeekdays: {},
				city: null,
				week: null,
				departmentId: null,
				time: null,
				CityList: [{
						value: null,
						text: '全部'
					},
					{
						value: '广州市',
						text: '广州市'
					},
					{
						value: '深圳市',
						text: '深圳市'
					},
					{
						value: '珠海市',
						text: '珠海市'
					},
					{
						value: '汕头市',
						text: '汕头市'
					},
					{
						value: '韶关市',
						text: '韶关市'
					},
					{
						value: '河源市',
						text: '河源市'
					},
					{
						value: '梅州市',
						text: '梅州市'
					},
					{
						value: '惠州市',
						text: '惠州市'
					},
					{
						value: '汕尾市',
						text: '汕尾市'
					},
					{
						value: '东莞市',
						text: '东莞市'
					},
					{
						value: '中山市',
						text: '中山市'
					},
					{
						value: '阳江市',
						text: '阳江市'
					},
					{
						value: '清远市',
						text: '清远市'
					},
					{
						value: '揭阳市',
						text: '揭阳市'
					},
					{
						value: '云浮市',
						text: '云浮市'
					},
					{
						value: '佛山市',
						text: '佛山市'
					},
					{
						value: '江门市',
						text: '江门市'
					},
					{
						value: '茂名市',
						text: '茂名市'
					},
					{
						value: '肇庆市',
						text: '肇庆市'
					},
					{
						value: '湛江市',
						text: '湛江市'
					},
					{
						value: '潮州市',
						text: '潮州市'
					} // 注意：这里修正了重复的 ID 问题，将最后一个城市的 ID 改为 21
				],
				TimeRanges: [{
						value: null,
						text: '整天'
					},
					{
						value: '上午',
						text: '上午'
					},
					{
						value: '下午',
						text: '下午'
					},
					{
						value: '晚上',
						text: '晚上'
					}
				],
				formatDates: {},
				DepartmentData: {},
				DatesAndWeekdays: {},
				PlanData: []
			}
		},
		onShow() {
			this.loadDepartment()
			this.getDatesAndWeekdays()
			this.loadDoctor()


		},
		methods: {
			loadDoctor() {
				this.$request.get(`/doctor/selectFrontPage/${this.city}/${this.departmentId}/${this.week}/${this.time}`)
					.then(res => {
						if (res.code === '200') {
							this.DoctorData = res.data.map(item => {
								// 将tag字符串转换为JavaScript数组
								item.tag = JSON.parse(item.tag); // 将每个字符串转换为字符数组
								return item;
							});
						} else {
							this.$message.error(res.msg);
						}
					});
			},
			filteredPlanData(week, time) {
				return this.PlanData.some(plan => plan.week === week && plan.time.includes(time));
			},
			getDatesAndWeekdays() {
				// 获取今天的日期
				const today = new Date();
				// 创建一个空数组用于存储结果
				const result = [];
				// 星期名称数组
				const weekDayNames = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
				// 遍历从今天开始的7天的日期
				for (let i = 0; i < 7; i++) {
					// 计算当前日期
					const currentDate = new Date(today);
					currentDate.setDate(today.getDate() + i);
					// 获取日期信息
					const month = currentDate.getMonth() + 1; // 月份从0开始
					const day = currentDate.getDate();
					const weekDayName = weekDayNames[currentDate.getDay()];
					// 将日期和星期名称添加到结果数组中
					result.push({
						date: `${month}月${day}日`, // 修改日期格式为月日形式
						weekday: weekDayName
					});
				}
				this.DatesAndWeekdays = result;
				this.formatDatesAndWeekdaysData(result)
			},
			loadDepartment() {
				this.$request.get('/department/selectAll').then(res => {
					if (res.code === '200') {
						this.formatDepartmentData(res.data.reverse());
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			formatDepartmentData(DepartmentData) {
				this.DepartmentData = [{
					value: null,
					text: '全部'
				}].concat(
					DepartmentData.map(department => {
						return {
							value: department.id,
							text: department.departmentName
						};
					})
				);
			},
			formatDatesAndWeekdaysData(DatesAndWeekdays) {
				// 添加一个值为null，text为"全部"的选项
				this.formatDates = [{
					value: null,
					text: '全部'
				}].concat(
					DatesAndWeekdays.map(result => {
						return {
							value: result.weekday,
							text: result.weekday
						};
					})
				);
			},
			goDoctoerDetail(doctorId) {
				uni.navigateTo({
					url: '/pages/doctorDetail/doctorDetail?doctorId=' + doctorId
				})
			},
		}
	}
</script>

<style>
	.header-style {
		margin-left: 2px;
		font-size: 14px;
		line-height: 20px;
		font-weight: bold;
		width: 80px;
		text-align: center;
		background-color: #007D67;
		padding: 5px;
		box-sizing: border-box;
	}
</style>